<template>
  <div>
    <!--用卡片标签将“新增”按钮和表格合为一体-->
    <v-card>
      <v-card-title>
        <v-btn color="info" @click="addBrand">新增</v-btn>
        <!--空间隔离组件-->
        <v-spacer/>
        <v-spacer/>
        <v-spacer/>
        <!--搜索框，与search属性关联-->
        <v-text-field label="输入关键字搜索" v-model="search" append-icon="search" hide-details/>
      </v-card-title>

      <!--分割线-->
      <v-divider/>
      <!--items中对象的key要与表头的value一致-->
      <!--pagination.sync：包含分页和排序信息的对象-->
      <!--total-items：分页的总条数信息-->
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td>{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">
            <img v-if="props.item.image" :src="props.item.image" width="130" height="40">
            <span v-else>无</span>
          </td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <!--点击编辑的同时，将本行数据传递给子组件-->
            <v-btn color="info" @click="editBrand(props.item)">编辑</v-btn>
            <v-btn color="error" @click="deleteBrand(props.item.id)">删除</v-btn>
          </td>

        </template>
      </v-data-table>
    </v-card>

    <!--弹出对话框 v-model：value值双向绑定到show变量，用来控制窗口显示
                  max-width控制对话框最大宽度
                  persistent ：点击弹窗以外的地方不会关闭弹窗，默认是false-->
    <v-dialog max-width="500" v-model="show" persistent>
      <v-card>
        <!--对话框的标题 - dense：紧凑显示  dark：黑暗主题  color：颜色，primary就是整个网站的主色调，蓝色-->
        <v-toolbar dense dark color="primary">
          <v-toolbar-title>{{isEdit?'修改':'新增'}}品牌</v-toolbar-title>
          <v-spacer/>
          <v-btn icon @click="closeWindow">
            <v-icon>close</v-icon>
          </v-btn>
        </v-toolbar>

        <!--对话框的内容，表单
        class=“px-5"：vuetify的内置样式，含义是padding的x轴设置为5，这样表单内容会缩进一些，而不是顶着边框-->
        <v-card-text class="px-5">
          <!--通过v-bind绑定属性将数据传给子组件，父向子通讯-->
          <my-brand-form @close="closeWindow" :oldBrand="oldBrand" :isEdit="isEdit"></my-brand-form>
        </v-card-text>
      </v-card>
    </v-dialog>

  </div>


</template>

<script>
  import MyBrandForm from "./MyBrandForm"

  export default {
    name: "my-brand",
    data() {
      return {
        search: '', // 搜索过滤字段
        totalBrands: 0, // 总条数
        brands: [{id: 1, name: '三星', image: '123', letter: 'S'},
          {id: 1, name: '三星', image: '123', letter: 'S'},
          {id: 1, name: '三星', image: '321', letter: 'S'}], // 当前页品牌数据,暂时填充的假数据展示页面效果
        loading: true, // 是否在加载中
        pagination: {}, // 分页信息
        headers: [ // 头信息
          {text: 'id', align: 'center', value: 'id'},
          {text: '名称', align: 'center', sortable: false, value: 'name'},
          {text: 'LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter', sortable: false},
          {text: '操作', align: 'center', value: 'id', sortable: false,}
        ],
        //控制对话框的显示
        show: false,
        //将要被编辑的数据暂存至oldBrand中
        oldBrand: {},
        //添加标记来记录是新增还是修改,默认是false
        isEdit: false
      }
    },
    // 钩子函数，在Vue实例初始化完毕后调用这个方法，这里使用mounted（挂载后）函数，即当页面加载完毕之后再加载数据
    mounted() {
      this.getDataFromServer();
    },
    methods: {
      getDataFromServer() { //从服务器加载数据
        this.$http.get("/item/brand/page",
          {
            params: {
              key: this.search, // 搜索条件
              page: this.pagination.page,// 当前页
              rows: this.pagination.rowsPerPage,// 每页大小
              sortBy: this.pagination.sortBy,// 排序字段
              desc: this.pagination.descending// 是否降序
            }
          }).then(resp => {
          console.log(resp);
          //将得到的数据赋值给本地属性,在请求成功的返回结果中，有一个data属性，里面就是真正的响应数据。
          this.brands = resp.data.items;
          this.totalBrands = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
      },
      //点击“新增”按钮，弹窗显示
      addBrand() {
        //修改弹窗标记为false，代表新增
        this.isEdit = false;
        this.show = true;
        this.oldBrand = null;
      },
      //关闭弹窗
      closeWindow() {
        this.show = false;
        //关闭弹窗后，重新加载页面数据
        this.getDataFromServer();
      },
      //点击编辑的时候，弹窗出现
      editBrand(oldBrand) {
        //在弹窗出现之前，先查询分类数据
        this.$http.get("/item/category/bid/" + oldBrand.id)
          .then(({data}) => {
            //修改弹窗标记为true，代表编辑
            this.isEdit = true;
            this.show = true;
            this.oldBrand = oldBrand;
            this.oldBrand.categories = data;
          })
      },
      //点击删除的时候，将该品牌删除
      deleteBrand(delId) {
        this.$message.confirm('此操作将永久删除数据，是否继续?', '提示', {
          confirmButtonText: '确定删除',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            this.$http.delete("/item/brand/" + delId)
              .then(() => {
                  this.$message.success("删除成功")
                  this.getDataFromServer()
              })
              .catch(() => {
                this.$message.error("删除失败")
              })
          })
          .catch(() => {
            this.$message.info("已取消删除")
          })
      }
    },
    watch: {
      pagination: {
        deep: true,
        handler() {
          //监听到分页数据的变化，就回调查询方法
          this.getDataFromServer();
        }
      },
      search: {
        handler() {
          //监听到搜索框内数据的变化，就回调查询方法
          this.getDataFromServer();
        }
      }
    },
    components: {
      MyBrandForm
    }
  }


</script>

<style scoped>

</style>
